<template>
	<public-view navType="other2" navTitle="加油站列表" topBgShow="2">
		<view class="content">
			<my-swiper :list="swiper_list"></my-swiper>
			<view class="gas-select-box flex a-i-c j-c-b">
				<view class="left f-w-b f-s-32 l-h-44 flex f-d-c a-i-c">
					精选
					<view class="line"></view>
				</view>
				<view class="right flex a-i-c">
					<picker class="flex a-i-c color-696969 f-s-26" @change="changeGas" :range="gasoline" range-key="name" style="margin-right: 46rpx;">
						{{choose_gas.name ||"油号筛选"}}
						<image class="icon" src="@/static/images/select-icon.svg" mode=""></image>
					</picker>
					<picker class="flex a-i-c color-696969 f-s-26" :range="distance_list" @change="changeD">
						{{distance_text||"默认距离"}}
						<image class="icon" src="@/static/images/select-icon.svg" mode=""></image>
					</picker>
				</view>
			</view>
			<block v-for="(item, index) in gas_list" :key="index">
				<view class="gas-item flex a-i-c">
					<image class="logo" :src="item.images" mode=""></image>
					<view class="gas-item-info">
						<view class="title-box flex a-i-c">
							<view class="title f-s-30 f-w-b l-h-42">
								{{item.name||""}}
							</view>
							<view class="km-box all-center color-333 f-s-24 l-h-24">
								<image class="icon" src="@/static/images/blcak-location-icon.svg" mode=""></image>
								{{item.distance||0}}km
							</view>
						</view>
						<view class="locaiton-box color-979797 f-s-24 flex a-i-c">
							<image class="icon" src="/static/images/circle/location-icon.svg" mode=""></image>
							<text style="width: 400rpx;">{{item.address_str||""}}</text>
						</view>
						<view class="bottom-box flex a-i-c j-c-b w-100">
							<view class="left f-s-24 color-F32E2E">
								¥<text class="f-s-40 f-w-b">{{item.rates||0}}</text>/L起
							</view>
							<view class="right flex a-i-c f-s-24 f-w-b">
								<view class="item item-one all-center" @click="$callPhone(item.principal_phone)">
									<image class="icon" src="@/static/images/my/store-phone-icon.svg" mode=""></image>
									拨打
								</view>
								<view class="item item-two all-center" @click="$location.openMapLocation(item.lat,item.lng)">
									<image class="icon" src="@/static/images/red-map.svg" mode=""></image>
									到这去
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</public-view>
</template>

<script>
	import mySwiper from "@/components/myComponents/swiper.vue"
	import {getMerchantList} from "@/utils/pagePublic.js"
	export default {
		components:{
			"my-swiper":mySwiper
		},
		data() {
			return {
				swiper_list:[],
				lng:"",
				lat:"",
				gasoline:[{name:"默认",id:""}],
				choose_gas:{},
				distance_list:["默认距离",'5.0km','10.0km','20.0km'],
				distance:'',
				gas_list:[]
			};
		},
		watch:{
			"$store.state.nav_address":{
				handler(){
					this.gas_list = []
					this.getMerchantList()
				}
			}
		},
		onLoad(){
			let that = this
			that.$location.myGetLocation((res)=>{
				console.log(res)
				that.gasoline = that.gasoline.concat(that.$store.getters.gasoline)
				that.lng = res.lng
				that.lat = res.lat
				that.getMerchantList()
			},false)
			that.getSwiperList()
		},
		onPullDownRefresh() {
			this.gas_list = []
			this.getMerchantList()	
		},
		methods:{
			getSwiperList(){
				let that = this
				that.util.getRequest({
					url:"v1/public_/getBanner",
					data:{
						type:2
					}
				}).then(res=>{
					console.log(res)
					that.swiper_list = res.data
				})
			},
			changeGas(e){
				let index = e.detail.value
				this.choose_gas = this.gasoline[index].id !== ''?this.gasoline[index]:{},
				this.gas_list = []
				this.getMerchantList()
			},
			changeD(e){
				let index = e.detail.value
				let arr = []
				if(this.distance_list[index] === "默认距离"){
					this.distance_text = ""
				}else{
					this.distance_text = this.distance_list[index]
					arr = this.distance_text.split('.')
				}
				this.distance = arr[0] ||0
				this.gas_list = []
				this.getMerchantList()
			},
			getMerchantList(){
				let that = this,address=this.$store.state.nav_address
				getMerchantList({
					type:1,
					gasoline_ids:!!!that.choose_gas.id?[]:[that.choose_gas.id],
					distance:this.distance||0,
					distance_sort:"asc",
					lng:that.lng,
					lat:that.lat,
					province_id:address.provinces.id,
					city_id:address.city.id,
					area_id:address.area.id
				},(res)=>{
					console.log(res)
					that.gas_list = res.data.data
					uni.stopPullDownRefresh()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gas-item{
		width: 694upx;
		padding: 20upx 18upx;
		background: #FFFFFF;
		border-radius: 24upx;
		margin-bottom: 20rpx;
		.gas-item-info{
			.bottom-box{
				.left{
					
				}
				.right{
					.item{
						width: 120upx;
						height: 48upx;
						border-radius: 8upx;
						.icon{
							width: 26upx;
							height: 26upx;
							margin-right: 6upx;
						}
					}
					.item-one{
						margin-right: 8upx;
						border: 2upx solid #2567F3;
						color: #2567F3;
					}
					.item-two{
						border: 2upx solid #F32E2E;
						color: #F32E2E;
					}
				}
			}
			.locaiton-box{
				margin-bottom: 22upx;
				.icon{
					width: 26upx;
					height: 26upx;
					margin-right: 4upx;
				}
			}
			.title-box{
				margin-bottom: 6upx;
				.km-box{
					background: #F2f2f2;
					border-radius: 40upx;
					padding: 2upx 12upx;
					.icon{
						width: 20upx;
						height: 20upx;
						margin-right: 10upx;
					}
				}
				.title{
					width: 322upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 24rpx;
				}
			}
		}
		.logo{
			width: 158upx;
			height: 158upx;
			margin-right: 12upx;
		}
	}
	.gas-select-box{
		width: 100%;
		margin-top: 22upx;
		padding: 0 40upx;
		margin-bottom: 36upx;
		.right{
			.icon{
				width: 20upx;
				height: 20upx;
				margin-left: 20upx;
			}
		}
		.left{
			position: relative;
			.line{
				width: 38upx;
				height: 4upx;
				background: #F32E2E;
				position: absolute;
				bottom: -8upx;
			}
		}
	}
	.content{
		width: 750rpx;
		min-height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 22rpx;
	}
</style>
